<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>Contact Us</title>
        <link href="favicon.ico" rel="shortcut icon">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/contact.css">
    </head>
    <body>
        <div id="contn">
           <v-header></v-header>
           <v-main :parent-nav="nav" :parent-currentind="currentind" :parent-blocks="blocks" :parent-loc="loc"></v-main>
            <v-footer></v-footer> 
        </div>

        

        <template id="vMain">
            <main>
                <div class="heading">
                    <div class="storeBox" v-if="parentNav.length" v-html="parentNav[parentCurrentind].htmlContent"></div>
                    <p class="pic fill"><img v-if="parentNav.length" :src="parentNav[parentCurrentind].imagePath" class="obj-c" alt=""></p>
                    <div class="fluid flex flex-align-items fill">
                        <div class="txt ready">
                             <p class="delay-1" v-if="parentNav.length">{{parentNav[parentCurrentind].enName}}</p>
                             <p class="delay-2"></p>
                        </div>
                        <div class="offices">
                            <img src="img/contact/map.png" alt="">
                            <ul class="loc">
                                <li class="snp">
                                    <img src="img/contact/snp.png" alt="">
                                    <div class="t">
                                        <div v-if="parentBlocks.length" v-html="parentBlocks[0].htmlContent"></div>
                                    </div>
                                </li>
                                <li class="cn">
                                    <img src="img/contact/cn.png" alt="">
                                    <div class="t">
                                        <div v-html="parentLoc.length?parentLoc[0].ary[0]:''"></div>
                                        <div v-html="parentLoc.length?parentLoc[0].ary[1]:''"></div>
                                    </div>
                                </li>
                                <li class="gmn">
                                    <img src="img/contact/gmn.png" alt="">
                                    <div class="t">
                                        <div v-html="parentLoc.length?parentLoc[1].ary[0]:''"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tips">
                    <p></p>
                </div>
                <div class="us fluid flex">
                    <div class="offices">
                        <div class="itm">
                            <p class="ttl" v-if="parentBlocks.length">{{parentBlocks[0].category}}</p>
                            <ul>
                                <li v-for="(item,i) in parentBlocks">
                                    <div class="storeBox" v-html="item.htmlContent"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="itm" v-for="(item,i) in parentLoc">
                            <p class="ttl">{{item.country}}</p>
                            <ul>
                                <li v-if="parentLoc.length" v-for="(sonItem,n) in item.ary" v-html="sonItem"></li>
                            </ul>
                        </div>
                    </div>
                    <div class="form">
                        <p>Drop us a message</p>
                        <form action="">
                            <div class="form-group">
                                <p>Name</p>
                                <input type="text">
                            </div>
                            <div class="form-group">
                                <p>Email</p>
                                <input type="text">
                            </div>
                            <div class="form-group">
                                <p>Subject</p>
                                <input type="text">
                            </div>
                            <div class="form-group">
                                <p>Message</p>
                                <textarea></textarea>
                            </div>
                        </form>
                        <div class="btns">
                            <p class="fillAft clear" @click="clearInp">Clear</p>
                            <p class="fillAft submit">Submit</p>
                        </div>
                    </div>
                </div>
           </main>
        </template>
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            var contn = new Vue({
                el:'#contn',
                data:{
                    currentind:'',
                    nav:[],
                    blocks:[],
                    loc:[]
                },
                methods:{
                    writingWeb:function(){
                        //获取heading
                        axios.get(dataUrl + 'api/getNavbar',{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            this.nav = res.data.data;
                            for(var a = 0;a < res.data.data.length;a++){
                                if(window.location.href.indexOf('html') < 0){
                                    this.currentind = 0;
                                }else if(window.location.href.indexOf(res.data.data[a].visitUrl) >= 0){
                                    this.currentind = a;
                                }
                            }
                            setTimeout(function(){
                                $('main .heading .fluid .txt p:eq(1)').text($('main .heading .storeBox p:eq(0)').text());
                                $('main .tips p').text($('main .heading .storeBox p:eq(1)').text());
                            },10)
                        });

                        //获取head office
                        axios.post(dataUrl + 'api/getArchivesDetails',{ext06:0,id:86,size:10000,page:1},{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            console.log(res.data.data);
                            this.blocks = res.data.data.list;

                            setTimeout(function(){
                                for(var p = 0;p < $('main .us .offices .itm:first-child .storeBox').find('p').length;p++){
                                    var html = $('main .us .offices .itm:first-child .storeBox').find('p')[p].innerHTML;
                                    if(html.indexOf('<br>') >= 0){
                                        $('main .us .offices .itm:first-child .storeBox p:eq(' + p + ')').remove();
                                        p -= 1;
                                    }
                                }
                                
                                for(var n = 0;n < $('main .us .offices .itm:first-child li').length;n++){
                                    $('main .us .offices .itm:first-child li').eq(n).html($('main .us .offices .itm:first-child li .storeBox').html());
                                }
                            },10)
                        });

                        //获取地址列表
                        axios.post(dataUrl + 'api/getArchivesDetails',{ext06:0,id:87,size:10000,page:1},{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            var list = res.data.data.list;
                            var country = [];
                            for(var l = 0;l < list.length;l++){
                                if(country.indexOf(list[l].title) < 0){
                                    country.push(list[l].title);
                                    //console.log(list[l].title);
                                    this.loc[this.loc.length] = {};
                                    this.loc[this.loc.length - 1]['country'] = list[l].title;
                                    this.loc[this.loc.length - 1]['ary'] = [];
                                }
                            }
                            for(var a = 0;a < this.loc.length;a++){
                                for(var n = 0;n < list.length;n++){
                                    if(this.loc[a].country == list[n].title){
                                        this.loc[a].ary.push(list[n].htmlContent);
                                    }
                                }
                                
                            }
                            var This = this;
                            setTimeout(function(){
                                
                                //contact的other office有时候没挂载上去
                                if($('main .us .offices .itm').length <= 1){
                                    $('main .us .offices .itm')[0].timeOut = function(){
                                        console.log('update');
                                        if($('main .us .offices .itm').length <= 1){
                                            for(var n = 0;n < This.loc.length;n++){
                                                var ttl = '<p class="ttl">' + This.loc[n].country + '</p>';
                                                var ul = '<ul>';
                                                for(var l = 0;l < This.loc[n].ary.length;l++){
                                                    var li = '<li>' + This.loc[n].ary[l] + '</li>';
                                                    ul += li;
                                                }
                                                ul += '</ul>';
                                                var itm = $('<div class="itm"></div>').html((ttl + ul));
                                                $('main .us .offices').append(itm);
                                            }
                                            if($('main .us .offices .itm').length <= 1){
                                                setTimeout(function(){
                                                    $('main .us .offices .itm')[0].timeOut();
                                                },10)
                                            }
                                        }else{
                                            console.log('stop update');
                                            $('main .us .offices .itm')[0].timeOut = null;
                                            $('main .us .offices .itm:gt(0) li p').find('br').remove();
                                        }
                                    }
                                    $('main .us .offices .itm')[0].timeOut();
                                }

                                if(!$('main .heading .offices .cn + .t div:eq(0)').html()){
                                    
                                    
                                    $('main .heading .offices')[0].timeOut = function(){
                                        if(!$('main .heading .offices .cn .t').find('div').eq(0).html()){
                                            $('main .heading .offices .cn .t').find('div').eq(0).html(This.loc[0].ary[0]);
                                            $('main .heading .offices .cn .t').find('div').eq(1).html(This.loc[0].ary[1]);
                                            $('main .heading .offices .gmn .t').find('div').eq(0).html(This.loc[1].ary[0]);
                                            if(!$('main .heading .offices .cn .t').find('div').eq(0).html()){
                                                console.log($('main .heading .offices .cn .t').find('div').eq(0).html());
                                                setTimeout(function(){
                                                    $('main .heading .offices')[0].timeOut();
                                                },10)
                                            }
                                        }else{
                                            console.log('stop loc update');
                                            $('main .heading .offices')[0].timeOut = null;
                                            $('main .heading .offices li p').find('br').remove();
                                        }
                                    }
                                    $('main .heading .offices')[0].timeOut();
                                    
                                }
                            },100)

                                
                        })
                    }
                },
                created:function(){
                    this.writingWeb();
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        methods:{
                            clearInp:function(){
                                $('main .us .form form .form-group>p + *').val('');
                            }
                        },
                        props:['parentNav','parentCurrentind','parentBlocks','parentLoc'],
                    }
                },
            })
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/contact.js"></script>
    </body>
</html>